<template>
    <van-swipe class="h-24 text-gray-500 text-sm">
        <van-swipe-item class="flex justify-around">
            <div v-for="item in frontpage" class="flex flex-col h-16 w-16 items-center justify-around">
                <van-icon class-prefix="iconfont" :class="item.icon" size="20"></van-icon>
                <span>{{ item.title }}</span>
            </div>
        </van-swipe-item>
        <van-swipe-item class="flex justify-around">
            <div v-for="item in backpage" class="flex flex-col h-16 items-center justify-around">
                <van-icon class-prefix="iconfont" :class="item.icon" size="20"></van-icon>
                <span>{{ item.title }}</span>
            </div>
        </van-swipe-item>
    </van-swipe>
</template>

<script setup lang="ts">
import type { CardIconType } from '@/types/iconTypes';
import { computed } from 'vue';

// 定义菜单项的类型
interface MenuItem {
    items: CardIconType[]
}
const props = defineProps<MenuItem>()

const frontpage = computed<CardIconType[]>(() => {
    const halfLength = Math.ceil(props.items.length / 2);
    return props.items.slice(0, halfLength);
});
const backpage = computed<CardIconType[]>(() => {
    const halfLength = Math.ceil(props.items.length / 2);
    return props.items.slice(halfLength);
});

</script>

<style scoped>
/* 你可以在 scoped 样式中添加自定义样式 */
</style>